@charset "UTF-8";

//--------------------- display ---------------------//

.show {
  display: block;
}

.ibshow {
  display: inline-block;
}

.hide {
  display: none;
}

.oh {
  overflow: hidden;
}

//--------------------- float ---------------------//

.relative {
  position: relative;
}

.fixed {
  position: fixed;
}

//--------------------- float ---------------------//

.fl {
  float: left;
}

.fr {
  float: right;
}

//--------------------- clearfix ---------------------//

.cl {
  clear: both;
}

.clx:after {
  content: "";
  display: table;
  clear: both;
}

//--------------------- margin ---------------------//

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mt40 {
  margin-top: 40px;
}

.ml10 {
  margin-left: 10px;
}

.ml20 {
  margin-left: 20px;
}

.mr10 {
  margin-right: 10px;
}

.mr20 {
  margin-right: 20px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

//--------------------- font ---------------------//

.tal {
  text-align: left;
}

.tac {
  text-align: center;
}

.tar {
  text-align: right;
}

.fz12 {
  font-size: 12px;
}

.fz14 {
  font-size: 14px;
}

.text-break {
  word-break: break-all;
  word-wrap: break-word;
}
.text-nowrap {
  white-space: nowrap;
}
.text-warn {
  color: $orange;
}
.text-green{
  color: $green;
}

//--------------------- base ---------------------//

.clearfix {
  @include clearfix();
}
.inline-center {
  @extend %align-inline-center;
}

//-------------------------col--------------------//
.col-1{
  width:10%;
}
.col-2{
  width: 20%;
}
.col-3{
  width: 30%;
}
.col-4{
  width: 40%;
}
.col-5{
  width: 50%;
}
.col-6{
  width: 60%;
}
.col-7{
  width: 70%;
}
.col-8{
  width: 80%;
}
.col-9{
  width: 90%;
}
